<template>
	<view class="tourOrder">
		<NavTabBar :tabLists="orderStatus" ref="navTabBar" @handleChange="changCurTabs"></NavTabBar>
		<view class="oder_list">
			<view class="tour_item" v-for="item in orderList.lists">
				<TourOrderItem :itemData="item" @changeOrderStatus="initGetList"></TourOrderItem>
			</view>
		</view>
		<u-loadmore :status="loadMoreStatus" v-if="orderList.lists.length" />
	</view>
</template>

<script>
	import NavTabBar from '../../components/navTabBar/navTabBar.vue';
	import TourOrderItem from '../../components/tourOderItem/tourOderItem.vue';
	import com from '../../mixin/index.js';
	export default {
		components: {
			NavTabBar,
			TourOrderItem
		},
		mixins: [com],
		data() {
			return {
				orderStatus: [{
						name: '全部',
						status: 'all'
					},

					{
						name: '待付款',
						status: 'unpay'
					},
					{
						name: '待使用',
						status: 'payed'
					},
					{
						name: '待评价',
						status: 'wait_comment'
					},
					{
						name: '已完成',
						status: 'done'
					},
					{
						name: '已取消',
						status: 'cancel'
					}
				],
				page: {
					page: 1,
					page_size: 4
				},
				orderList: {
					lists: [],
					total: 1,
					total_page: 0
				},
				curTabsObj: {}
			};
		},
		onLoad(val) {
			if (val.status) {
				let status = val.status;
				console.log(val, 'sasa');
				this.curTabsObj = this.orderStatus.find((item, index) => {
					if (item.status == status) {
						this.$refs.navTabBar.currentTab = index;
						return item;
					}
				});
				// this.tabLists.indexOf(curTabsObj.name);
			}
			this.getUserOrderList();
		},
		onReachBottom() {
			this.getUserOrderList();
		},
		onPullDownRefresh() {
			this.initGetList();
		},
		methods: {
			changCurTabs(val) {
				console.log(val, '切换了 aaaaaaaa');
				this.curTabsObj = this.orderStatus[val];
				this.initGetList();
			},
			//初始化重新获取
			initGetList() {
				this.page = {
					page: 1,
					page_size: 4
				};
				this.orderList = {
					lists: [],
					total: 1,
					total_page: 0
				};
				this.getUserOrderList();
			},
			getUserOrderList() {
				console.log(this.curTabsObj, 'sssssssss');
				let params = {
					status: this.curTabsObj.status,
					keyword: '',
					...this.page
				};
				this.getList('orderList', 'getMyTourOrder', 'page', params).then(res => {
					uni.stopPullDownRefresh();
				});
			}
		}
	};
</script>

<style lang="scss">
	.tourOrder {
		min-height: 100vh;
		padding: 24rpx;
		background-color: #f9f9f9;

		.page_top_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10rpx;

			.pageTitle {
				padding-left: 80rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;
			}

			.user_op_box {
				display: flex;
				align-items: center;

				.op_item {
					text-align: center;
					margin-right: 20rpx;

					&:nth-last-child(1) {
						margin-right: 0;
					}

					.op_item_name {
						font-size: 20rpx;
						color: #333;
					}
				}
			}
		}

		.oder_list {
			.tour_item {
				margin-bottom: 20rpx;
			}
		}
	}
</style>